<template>
	<view class="container" >
			<!-- 商品列表 -->
			<view class="goods" >
				<view class="disflex" :class="drag_info&&index!=drag_info.goods_list.length-1?'b-bottom':''" style="margin: 20rpx;padding-bottom: 20rpx;" v-for="(item,index) in drag_info.goods_list" :key="index">
					<view style="position: relative;">
						<image v-if="item.pics[0].type==1" class="big-image" :src="item.pics[0].src"></image>
						<video v-else :src="item.pics[0].src" style="height: 216rpx;width: 216rpx;border-radius: 10rpx;" :controls="false" :show-center-play-btn="false"></video>
					</view>
					<view class="goods-list">
						<view class="goods-title">{{item.title}}</view>
						<view class="disflex" style="margin-top: 20rpx;">
							<view class="goods-price">￥{{item.price}}</view>
							<view class="disflex" style="align-items: center;" v-if="item.store>0">
								<image src="/static/temp/des.png" @click="desNum(index)"></image>
								<view class="goods-num">{{item.num}}</view>
								<image src="/static/temp/add2.png" @click="addNum(index)"></image>
							</view>
							<view v-else><image src="/static/temp/add1.png" ></image></view>
						</view>
					</view>
				</view>
			</view>
			<view class="address">
				<textarea v-model="remark" placeholder="选填,输入备注内容、电话、地址等(不公开)" style="padding: 20rpx;" placeholder-style="color:#999999;font-size:28rpx;"></textarea>
			</view>
			<view class="bottom-op">
				<view class="total-detail">
					<text style="color: #999999;">共{{total}}件,</text><text>合计:</text><text style="color: #FA6401;">￥{{total_price}}</text>
				</view>
				<view class="mar-left-20" @click="createOrder()" :disabled="disbaoming">
					<view class="pay-btn">立即支付</view>
				</view>
			</view>
			

		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	import UploadApi from '@/common/upload';
	export default{
		components: {
		},
		data(){
			return {
				show_mask:false,
				_background:'rgba(35,169,72,0.1)',
				drag_id:0,
				drag_info:{},
				total:0,
				total_price:0,
				disbaoming: false,
				remark:'',
				check_goods:[],
			}
		},
		onLoad(option){
			let param =JSON.parse(option.param);
			this.drag_id =param.drag_id;
			this.check_goods=param.check_goods;
			this.loadDetail();
		},
	
		methods: {
			...mapMutations(['login']),
			async loadDetail(){
				let data = await Api.apiCall('get',Api.apiName.purchase_detail,{id:this.drag_id});
				if(!data){
					return;
				}
				this.drag_info = data.data;
				for(let i=0;i<this.drag_info.goods_list.length;i++){
					for(let j=0;j<this.check_goods.length;j++){
						if(this.drag_info.goods_list[i].id==this.check_goods[j].goods_id){
							this.drag_info.goods_list[i].num=this.check_goods[j].num;
							break;
						}
					}
				}
				this.caculateTotal()
			},
			caculateTotal(){
				let temp=0;
				let num = 0;
				this.drag_info.goods_list.forEach((item,index)=>{
					temp+=item.num*parseFloat(item.price);
					num +=item.num;
				})	
				this.total_price=temp.toFixed(2);
				this.total = num;
			},
			
			addNum(index){
				if(this.drag_info.goods_list[index].num<this.drag_info.goods_list[index].store){this.drag_info.goods_list[index].num++;this.caculateTotal()}
				
			},
			desNum(index){
				if(this.drag_info.goods_list[index].num>0){this.drag_info.goods_list[index].num--;this.caculateTotal()}
			},
			async createOrder(){
				let totalTemp=0;
				try{
					this.drag_info.goods_list.forEach((item,index)=>{
						totalTemp+=item.num;
					})
					if(totalTemp==0){throw '请选择接龙的商品';}
				}catch(err){
					this.$api.msg(err);
					return;
				}
				this.drag_info.remark = this.remark;
				this.disbaoming = true;
				let data = await Api.apiCall('post',Api.apiName.add_order,{drag_info:this.drag_info});
				if(!data){
					this.disbaoming=false;
					return;
				}
				this.disbaoming=false;
				let res = await Api.apiCall('post',Api.apiName.to_pay,{order_sn:data.data.order_sn});
				if(!res){
					this.$api.msg(`订单异常`);
					return
				}
				let pay_data= res.data;
				let that = this;
				//支付参数
				uni.requestPayment({
					provider:'wxpay',
					timeStamp:pay_data.timeStamp,
					nonceStr:pay_data.nonceStr,
					package:pay_data.package,
					signType:pay_data.signType,
					paySign:pay_data.paySign,
					success:function(rel){
						that.$api.msg(`支付成功`);
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/order/success?id='+that.drag_id
							})
						}, 1500)
					},
					fail:function(err){
						that.$api.msg('您取消了支付')
					}
				})
			},
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
	}


	.mar-left-20{
		margin-left: 20rpx;
	}
	.goods{
		margin: 18rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		video{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.pd-20{
		padding: 20rpx 0rpx;
	}
	.b-bottom{
		border-bottom: 1px solid rgba(204,204,204,0.3);
	}
	.goods-title{
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		flex:1;
	}
	.width-75{
		width: 75%;
	}
	.width-50{
		width: 50%;
	}
	.width-60{
		width: 60%;
	}
	.width-40{
		width: 40%;
	}
	.margin-20{
		margin:10rpx 20rpx;
	}
	.disflex{
		display: flex;
	}
	.op-btn{
		padding: 5rpx 10px;
		border: 1px solid #999999;
		width: 110rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		margin-left: 10rpx;
		color:#999999;
	}
	.close{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 32rpx;
		height: 32rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		color: #FFFFFF;
		transform: rotate(45deg);
		font-size: 24rpx;
		line-height: 32rpx;
		text-align: center;
	}
	.player{
		position: absolute;
		top: 44rpx;
		left: 44rpx;
	}	
	.bottom-btn{
		position: fixed;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		padding: 30rpx 20rpx;
		text-align: center;
		z-index: 2;
	}
	.btn{
		background: #23A948;
		border-radius: 8rpx;
		padding: 20rpx;
		color:#FFFFFF;
	}
	.bottom-op{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		padding: 10rpx 0rpx;
		align-items: center;
	}
	.big-image{
		height: 216rpx;
		width: 216rpx;
		border-radius: 10rpx;
	}
	.goods-list{
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		width: 100%;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.goods-price{
		flex: 1;
		font-size: 40rpx;
		font-weight: bold;
		color:#FA6401;
	}
	.goods-num{
		padding: 0rpx 30rpx;
	}
	.address{
		margin:18rpx 30rpx;
		background: #FFFFFF;
		border-radius:10rpx ;
	}
	.total-detail{
		font-size: 28rpx;
		flex:1;
		text-align: center;
		font-size: 32rpx;
	}
	.pay-btn{
		padding: 20rpx 50rpx;
		margin: 10rpx;
		background: #23A948;
		border-radius: 8rpx;
		color:#FFFFFF;
	}
</style>
